<template>
  <MyDialog title="新增轮播图片" show-cancel :visible="showDialog" :ok-loading="btnLoading" width="700px" @close="close" @ok="handleConfirmClick">
    <el-form ref="baseForm" v-loading="loading" :model="modalFormData" label-suffix=":" label-width="100px" :rules="modalRules">
      <el-form-item label="图片名称" prop="title">
        <el-input v-model="modalFormData.title" placeholder="请输入图片名称" />
      </el-form-item>
      <el-form-item label="轮播图片">
        <UploadFileImg :file-list="fileList" />
      </el-form-item>
    </el-form>
  </MyDialog>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";
import UploadFileImg from "@/components/uploadFileImgSingle/index";

export default {
  components: {
    UploadFileImg,
  },
  mixins: [dialogMixin],
  props: {
    initParams: {
      type: Object,
      default: () => ({}),
    },
    btnLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      fileList: [],
      loading: false,
      modalFormData: {
        title: "",
        url: "",
      }, // 模态框表单数据
      modalRules: {
        title: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    "initParams.row": {
      handler(row) {
        if (row) {
          this.modalFormData = {
            ...row,
          };
          const arr = row.url;
          if (Array.isArray(arr)) {
            this.fileList = arr.map((item) => {
              return {
                ...item,
                url: item.url,
              };
            });
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {
  },
  methods: {
    handleConfirmClick() {
      this.$refs.baseForm.validate((valid) => {
        if (!valid) return;
        if (this.fileList.length) {
          this.modalFormData.url = this.fileList[0].url;
          this.initParams.cb(this.modalFormData);
        }
      });
    },
    handleParentResponse(success) {
      if(success){
        this.fileList = [];
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.input-number {
  ::v-deep .el-form-item__label {
    width: 180px !important;
  }
}
.icon {
  margin: 6px 0 0 20px;
  font-size: 26px;
  color: #999;
  cursor: pointer;
}
</style>
